<template>
	<view class="user-content">

		<view class="title">
			<view class="user">
				<view class="icon">
					<image class="avertur" src="../../uni_modules/uni-id-pages/static/app-plus/uni-fab-login/qq.png">
					</image>
					<view class="changeuser">更换用户</view>
				</view>
				<view class="zili">
					<view>
						<view class="nickname">{{userInfo?.userInfo?.baseInfo?.nickname}}</view>
						<view>
							<view>{{userInfo?.userInfo?.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="collage">
				<view class="collage-item">
					<view class='number'>
						<view class="bg nobg">36</view>
					</view>
					<view class='text'>我的喜欢</view>
				</view>
				<view class="collage-item">
					<view class='number'>
						<view class="bg">50</view>
					</view>
					<view class='text'>牵手成功</view>
				</view>
				<view class="collage-item">
					<view class='number'>
						<view class="bg nobg">50</view>
					</view>
					<view class='text'>最近浏览</view>
				</view>
			</view>

		</view>
		<view class="qiandao">
			<view style="flex: 1;">
				<view class="marry  marry-daochu1024-14">
					<text class="text">签到可提高曝光量</text>
				</view>
				<text class="bgltext">{{userInfo?.signInfo?.signCount}}</text>
			</view>
			<view class="qiandaobtn" @click="signIn">
				<view>去签到</view>
			</view>
		</view>
		<view class="body">
			<view class="row" @click="rowClick('user')">
				<view>个人信息维护</view>
				<view class="marry marry-you"></view>
			</view>
			<view class="row">
				<view>好友分享</view>
				<view class="marry marry-you"></view>
			</view>
			<view class="row" @click="sendMsgToAdminRef.open()">
				<view>给红娘留言</view>
				<view class="marry marry-you"></view>
			</view>
			<view class="row" @click="alertDialogRef.open()">
				<view>打赏红娘</view>
				<view class="marry marry-you"></view>
			</view>
			<view class="row" @click="loginOut">
				<view>退出登录</view>
				<view class="marry marry-you"></view>
			</view>
		</view>
	</view>
	<uni-popup ref="alertDialogRef" type="dialog" class="alertDialogstyle">
		<view>
			<view class="head">
				<view>打赏红娘</view>
				<view class="close" @click="alertDialogRef.close()">X</view>
			</view>
			<view class="body">
				<image class="alertDialogstyleimage"
					src="https://mp-5169d5c1-5d00-4365-9ed0-e529199147f5.cdn.bspapp.com/cloudstorage/误删除/paymoney.jpg">
				</image>
			</view>
			<view class="footer">

			</view>
		</view>
	</uni-popup>
	<uni-popup ref="sendMsgToAdminRef" type="dialog" class="alertDialogstyle sendMsgToAdminstyle">
		<view>
			<view class="head">
				<view>给红娘留言</view>
				<view class="close" @click="sendMsgToAdminRef.close()">X</view>
			</view>
			<view class="body">
				<uni-easyinput type="textarea" v-model="sendmsg" placeholder="请输入内容"></uni-easyinput>
			</view>
			<view class="footer">
				<button type="primary" @click="sendMsgToAdmin">发送</button>
			</view>
		</view>
	</uni-popup>
</template>


<script setup lang="ts">
	import {
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import { onReady } from '@dcloudio/uni-app'
	import { useUserStore } from '../../stores/user.js';
	import { ref } from 'vue';
	const alertDialogRef = ref()
	const sendMsgToAdminRef = ref()
	const sendmsg = ref('')

	const userInfo = ref({
		userInfo: {},
		signInfo: {}
	})
	const userStore = useUserStore();

	const unclodObj = uniCloud.importObject("userObj")
	const logObj = uniCloud.importObject("log")
	onReady(() => {
		// getUserInfo()
	})
	const sendMsgToAdmin = async () => {
		console.log(sendmsg.value)
		if (sendmsg.value) {
			let param = {
				userId: uniCloud.getCurrentUserInfo().uid,
				msg: sendmsg.value
			}
			let res = await logObj.sendMsgToAdmin(param)
			console.log(res)
			if (res && res.success) {
				uni.showToast({
					"title": "已收到您的留言"
				})
				sendMsgToAdminRef.value.close()
			}

		} else {
			uni.showToast({
				"icon": 'error',
				"title": "请输入留言信息"
			})
		}

	}


	const getUserInfo = async () => {
		if (userStore?.userData?.userInfo?.userId) {
			userInfo.value = userStore?.userData
			return
		}
		const user = await unclodObj.getUserInfo(uniCloud.getCurrentUserInfo().uid)
		userStore.updateUserData(user)
		userInfo.value = user
		console.log(userInfo.value)
	}
	const loginOut = () => {
		userStore.updateUserData({
			userInfo: {},
			signInfo: {}
		})
		mutations.logout()
	}

	const rowClick = (type) => {
		if (type == 'user') {
			uni.navigateTo({
				url: '/pages/user/info/useInfo'
			})
		}
	}

	const signIn = async () => {
		console.log(userInfo.value.signInfo.signCount)
		// console.log(uniCloud.getCurrentUserInfo().uid); // 如果是admin用户的话，打印结果为true
		if (uniCloud.getCurrentUserInfo().uid) {
			try {
				let res = await unclodObj.signIn(uniCloud.getCurrentUserInfo().uid)
				if (res.success) {
					userInfo.value.signInfo = res.data.signCount
				}
				uni.showToast({
					"title": "签到成功"
				})
			} catch (error) {
				// uni.showToast({
				// 	"title": "签到失败",
				// 	"icon": 'error'
				// })
			}

		} else {
			uni.showToast({
				"title": "签到失败",
				"icon": 'error'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.user-content {
		.title {
			background: linear-gradient(#e66465, #9198e5);
			height: 400rpx;

			.user {
				height: 200rpx;
				display: flex;

				.icon {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					position: relative;
					width: 200rpx;

					.changeuser {
						font-size: 24rpx;
						background: #d96c78;
						border-radius: 10rpx;
						color: #fff;
						padding: 4rpx 12rpx;
						position: absolute;
						top: calc(100% - 70rpx);
						overflow: hidden;
					}

					.avertur {
						border-radius: 50%;
						height: 80rpx;
						width: 80rpx;
					}
				}

				.zili {
					display: flex;
					align-items: center;
				}
			}

			.collage {
				display: flex;

				.collage-item {
					flex: 1;
					text-align: center;
					color: #fff;

					.number {
						justify-content: center;
						display: flex;



						.bg {
							justify-content: center;
							display: flex;
							height: 60rpx;
							border: 2rpx solid #b1aeae;
							padding: 16rpx;
							width: 60rpx;
							background: #ebebeb3d;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #000;
						}

						.nobg {
							background: none;
							border: none;
						}
					}

					.text {
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}
			}
		}

		.qiandao {
			align-items: center;
			display: flex;
			height: 112rpx;
			background: linear-gradient(to right, #5a8af8, #9d41ee);
			margin: -32rpx 32rpx;
			border-radius: 19px;
			padding: 32rpx;

			.marry-daochu1024-14 {
				font-size: 48rpx;
				color: #fff;
				display: flex;
				align-items: center;

				.text {
					font-size: 24rpx;
				}
			}

			.bgltext {
				width: 200rpx;
				text-align: center;
				display: block;
				font-size: 44rpx;
			}

			.qiandaobtn {
				background: #fff;
				width: 100rpx;
				padding: 8rpx 20rpx;
				border-radius: 74rpx;
				font-size: 28rpx;
				justify-content: center;
				display: flex;
			}
		}

		.body {
			margin: 64rpx 32rpx;
			background: #eee;
			border-radius: 15px;
			padding: 16px 8px;

			.row {

				display: flex;
				justify-content: space-between;
				padding: 24rpx 0rpx;
				border-bottom: 1rpx solid #dbd7d7;

				&:last-child {
					border-bottom: none
				}

			}
		}
	}
</style>